<template>
<div>
  <div class="img2">
    <div>
          <div class="container">
            <div class="row clearfix">
              <div class="col-md-4 column">
              </div>
              <div class="col-md-4 column">
                <div class="jumbotron">

                  <p>
                    欢迎来到潍坊科技学院报修系统
                  </p>
                  <p>
                    <router-link to="/student_sign"><a class="btn btn-primary btn-large" href="#">学生注册</a></router-link><br>
                    <router-link to="/teacher_sign"><a class="btn btn-primary btn-large" href="#">教师注册</a></router-link><br>
                    <router-link to="/supervisor_sign"><a class="btn btn-primary btn-large" href="#">主管注册</a></router-link><br>
                  </p>
                </div>
                <div class="row clearfix">
                  <div class="col-md-12 column">
                    <el-select v-model="value" placeholder="选择身份">
                      <el-option
                          v-for="item in options"
                          :key="item.value"
                          :label="item.label"
                          :value="item.value">
                      </el-option>
                    </el-select>
                    <br>
                    <br>
                    <div class="form-group">
                      <label for="exampleInputEmail1">用户名</label><input type="text" v-model="username" class="form-control" id="exampleInputEmail1" />
                    </div>
                    <div class="form-group">
                      <label for="exampleInputPassword1">密码</label><input type="password" v-model="password" class="form-control" id="exampleInputPassword1" />
                    </div>

                    <button class="btn" v-on:click="login">登录</button>
                  </div>
                </div>
              </div>

              <div class="col-md-4 column">
              </div>
            </div>
          </div>

      <div class="img1">

      </div>
    </div>
  </div>

</div>

</template>

<script>
export default {
  name: "Login",
  data(){
    return {
      username : "",
      password : "",


      id:"1",
      options: [{
        value: 'student',
        label: '学生'
      }, {
        value: 'teacher',
        label: '老师'
      }, {
        value: 'supervisor',
        label: '主管'
      }],
      value: 'student'

    }
  },
  methods:{
    login(){
      if (this.value=="student"){

        this.$ajax.post( base_url + "student/login",{
          username : this.username,
          password : this.password
        }).then(response => {

              if(response.data.code == 200){
                this.$router.push({
                  path:'/student_repair/student', query:{
                    username:this.username
                  }
                })
              }else {
                alert("账户或密码错误")
              }

            }
        )



      }
      if (this.value=="teacher"){

        this.$ajax.post(base_url + "teacher/login",{
          username : this.username,
          password : this.password
        }).then(response => {

          if(response.data.code == 200){
            this.$router.push({
              path:'/teacher_repair/teacher', query:{
                username : this.username
              }
            })
          }else {
            alert("账号或者密码错误")
          }
            }
        )



      }
      if (this.value=="supervisor"){

        this.$ajax.post(base_url + "supervisor/login",{
          username : this.username,
          password : this.password
        }).then(response => {

          if(response.data.code == 200){
            this.$router.push({
              path:'/supervisor_repair/supervisor', query:{
                username:this.username
              }
            })
          }else {
            alert("账号或者密码错误")
          }

            }
        )



      }
    }
  }
}
</script>

<style scoped>
/* div{
	background-color: #C6E2FF;
		
} */
p{
	text-align: center;
	font-size: 30px;
	font-weight: bold;
}
.img1{
	position: absolute;
	background-image: url(img/1.jpg);
	height: 100px;
	width: 100px;
	top: 0px;
	background-size: 100%;
	z-index: 100;
	border-radius: 50px;
	margin: 0px auto;
    display: block;
	animation: A 0.1s linear infinite;
		
	
	}
@keyframes A{
0%{
	transform: rotate(0deg);
}
100%{
	transform: rotate(360deg);
	}
}
.of{
  overflow: hidden;
}
.img2{
	position: absolute;
	background-image: url(img/5.gif);
	height: 100%;
	width:100%;
  top: 0px;
  left: 0px;
	/*bottom: 0px;*/
	/*background-size: 100%;*/
	z-index: 1000;
	/*border-radius: 30px;*/
	/*animation-name: B;*/
	/*animation-duration: 20s;*/
	/*animation-timing-function: ease-in-out;*/
	/*animation-iteration-count: infinite;*/
	/*animation-direction:alternate;*/
	opacity: 0.6;
	/*transition-duration: 20s;*/
}
 @keyframes B
{
	0%   {top: 50px;
	left: 50px;}
	25%  {top: 680px;
	left: 1200px;}
	50%  {top: 680px;
	left: 50px;}
	75%  {top: 50px;
	left: 1200px;}
	100% {top: 50px;
	left: 50px;}
}
.form-group{
	font-weight: bold;
	color: azure;
}
</style>